<template>
  <div>
    <span class="follow-label fl">{{$t("webchat.relationSession")}}:</span>
    <div>
      <ul>
        <li class="follow-agent follow-common1" v-for="item in relatedWebchats" :key="item" @click.stop="relationSessionDetail(item)">
          <p class="item">{{item}} </p> 
          <i class="el-icon-close" @click.stop="closeRelatedSession(item)" v-show="masterSelect"></i>
        </li>
      </ul>
      <el-popover placement="top" width="230" ref="relationPopover" v-model="relatePopoverShow" trigger="click" @show="popoverShow">
        <div class="relationWrap" style="text-align: right; margin: 0">
          <el-input
            :placeholder="$t('business.businessTip5')"
            v-model="searchContent"
            size="mini"
            @keyup.native.enter="handleIconClick"
          >
            <i
              class="el-input__icon el-icon-search"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
          </el-input>
          <ul style="margin: 10px 0">
            <li
              v-for="(item, idx) in relatedSessionList"
              :key="idx"
              class="relationLi font12"
              :class="{ active: isActive }"
              @click="relationChange(item)"
            >
             <div class="new_chat ellipsis font14" style="padding-top:8px">
                <div class="ellipsis">
                  <span class="onlineStatus" v-show="item.userStatus === 'online' && item.status !== 'finish'">{{$t('monitor.online')}}</span>
                  <span class="offlineStatus" v-show="item.userStatus === 'offline' && item.status !== 'finish'">{{$t('monitor.offline')}}</span>
                  <span class="custintent fr" v-if="item.custIntention || item.custIntention === 0" :class="{'rehiddenBlock': item.userStatus === 'offline' && leaveTime(item.sBreakTime) && item.status !== 'finish'}">{{item.custIntention + '%'}}</span>
                  <span class="info_li_sname ellipsis new-name" :class="{'rehiddenBlock': item.userStatus === 'offline' && leaveTime(item.sBreakTime) && item.status !== 'finish'}">
                    {{ item.leavemsg ? item.sName + '(' + $t('webchat.leaveMessage') + ')' : item.sName}}
                  </span>
                </div>
                <div>
                  <span class="font12 date">{{chatTime(item)}}</span>
                </div>
              </div>
              <div class="new_chat ellipsis agents_and_skill_group" style="clear: both">
                <div class="ellipsis fl">
                  <span class="chat_info_name">{{agentName(item)}}</span>
                  <span v-show="toPeer(item)">({{toPeer(item)}})</span>
                </div>
                <div>
                  <i class="videoIcon iconfont icon-shipin" style="margin-right: 5px" v-show="item.showVideoIcon"></i>
                  <span
                    v-show="!showGrabBtn(item.toPeer, item.user, item.status, item.inviteUserStatus)"
                    class="chat_status"
                    :class="item.invitedUser && item.invitedUser === sessionId && item.inviteUserStatus === 'accept' ? 'status_beinvited card_statu_li' : item.status === 'changePeer' ? 'status_change' : item.status === 'finish' ? 'status_finish' : item.status === 'robot' ? 'status_robot' : item.status === 'undeal' ? 'status_undeal' : item.fromUser ? 'status_invited_get card_statu_li' : 'status_deal card_statu_li'"
                    v-html="item.invitedUser && item.invitedUser === sessionId && item.inviteUserStatus === 'accept' ? $t('webchat.beInvited') : item.status === 'changePeer' ? $t('webchat.transfer') : item.fromUser && item.status === 'finish' ? $t('webchat.TransferClosed') : item.status === 'undeal' ? $t('webchat.undeal') : item.status === 'robot' ? $t('webchat.robot') : item.status === 'form' ? $t('webchat.formStatus') : item.status === 'finish' ? $t('webchat.closed') : $t('webchat.received')"
                  ></span>
                </div>
                <span class="chat_status_btn clearBoth" v-show="showGrabBtn(item.toPeer, item.user, item.status, item.inviteUserStatus)">
                  <el-button size="mini" class="fr chat_btn robot_btn" @click.stop="grabConversation(item._id, item.sid, item.user)">{{$t('monitor.pickUp')}}</el-button>
                </span>
              </div>
              <div class="agent_wait_time" style="clear: both;height:17px">
                <span :title="platformContent(item)" class="platformContent ellipsis">
                  <i :class="['im_' + item.platform]"></i>
                  {{platformContent(item)}}
                </span>
                <div class="cust_status_box">
                  <span class="iconfont" :class="'icon-youxianjinxian__' + $i18n.locale" v-show="item.priority"></span>
                  <span class="cust_status" :style="{color: currentColor(item.cust_status)}">{{statusName(item.cust_status)}}</span>
                </div>
              </div>
              <div v-show="isActive" class="relationDuihao">
                <i class="el-icon-check" style="color: #fff"></i>
              </div>
            </li>
          </ul>
          <el-button
            type="primary"
            size="mini"
            style="margin-top: 10px"
            @click="saveRelatedSession"
            >{{ $t("public.save") }}</el-button
          >
        </div>
      </el-popover>
      <div class="follow-agent-wrap">
        <span
          class="follow-agent-add follow-common"
          v-popover:relationPopover
          v-if="masterSelect"
          ><i class="el-icon-plus"></i> {{ $t("public.add") }}</span
        >
      </div>
    </div>
    <div>
      <!--质检优化时 把下边弹窗   :append-to-body="true" :modal-append-to-body="true"  解决z-index的样式问题-->
      <el-dialog :close-on-click-modal="false" :append-to-body="true" :modal-append-to-body="true" lock-scroll top="10vh" :visible.sync="relatedSessionIsShow" :title="$t('webchat.sessionRecord')" width="800px">
        <emailDetails
          :lastEmail="webchatData.data"
          v-if="webchatData.type === 'mail'">
        </emailDetails>
        <webChatView
          :showFlag = "true"
          :chatInformationId ="webchatData._id"
          v-if="webchatData.type === 'webchat'">
        </webChatView>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {timeFormat, getFormatDateTime, getCache, getCacheByKey, deepClone, contains} from '@/utils/m7Utils.js'
import WebchatConMsgBox from '../../../business-modules/webchat/WebchatConMsgBoxNew.vue'
import emailDetails from '@/components/business-modules/email/emailDetails.vue'
import webChatView from '@/components/business-modules/webchat/webChatView.vue'
export default {
    name:'relatedSession',
    props:{ 
      relatedWebchats: {
        type: Array,
        default:() => []
      },//已关联会话
      relatedSessionShow: {type: Boolean, default: true},//详情中不能再点击详情
      masterSelect:{type:Boolean, default: true},//是否有权限操作关联会话
    },
    components: {
      WebchatConMsgBox,
      emailDetails,
      webChatView,
    },
    data(){
        return{
          relatedSessionIsShow:false,//会话详情弹窗
          businessDetail:{},//会话详情
          isActive:false,//动态class
          searchContent:'',//搜索会话input框
          relatedSessionList:[],//会话搜索数据
          relatedSessionListNew:[],//搜索会话展示数据
          showHistory:true,//会话历史详情是否展示
          busId:'',//会话id
          relatePopoverShow: false,
          multiChannel:[],
          webchatData:{},
          chatMsgCon: {
           font: 'font12'
          },
          uploaded: {
            uploadImg: false,
            uploadImgSessionId: '',
            uploadFile: {
                flag: false,
                progress: '',
                name: '',
                uploadFileSessionId: ''
            }
          },
          expandLayout: false, // 展开布局flag
          messageList:[],
          flag: this.$store.getters.isEcommerce ? 'ecommerce' : 'kf',
          CSRShowToAgent: 'all',
          investigate: false,
        }
    },
    computed: {
      chatMethod () {
        let platform = ''
        if (this.webchatData) {
          if (this.webchatData.platform === 'pc') {
            platform = this.$t('webchat.platformPc')
          } else if (this.webchatData.platform === 'wap') {
            platform = this.$t('webchat.platformWap')
          } else if (this.webchatData.platform === 'sdk') {
            platform = this.$t('webchat.platformApp')
          } else if (this.webchatData.platform === 'weixin') {
            platform = this.$t('webchat.platformWeixin')
          } else if (this.webchatData.platform === 'wxmini') {
            platform = this.$t('webchat.platformWeixinMini')
          } else if (this.webchatData.platform === 'weibo') {
            platform = this.$t('webchat.platformWeibo')
          } else if (this.webchatData.platform === 'dy') {
            platform = this.$t('webchat.TikTok')
          } else if (this.webchatData.platform === 'wxkf') {
            platform = this.$t('webchat.platformWXKF')
          } else {
            platform = this.$t('webchat.platformOther')
          }
        }
        return platform
      },
      seoKeywords () {
        return this.decodeFun(deepClone(this.webchatData.seoKeywords))
      },
      browserInfo () {
        // 浏览器
        var content = ''
        if (this.webchatData && this.webchatData.navigator) {
          var output = {}
          try {
            output = parserFun.setUA(this.webchatData.navigator).getResult()
          } catch (error) {}
          if (output && output.browser && output.browser.name) {
            content = output.browser.name
            if (output.browser.version) {
              content = output.browser.name + ' ' + output.browser.version
            }
          }
        }
        if (!content || content === 'undefined') {
          if (this.webchatData.ubaInfo && this.webchatData.ubaInfo.browserName) {
            content = this.webchatData.ubaInfo.browserName
          } else {
            content = this.$t('webchat.nothing')
          }
        }
        return content
      },
      osInfoNew () {
        // 操作系统
        var osContent = ''
        if (this.webchatData && this.webchatData.navigator) {
          var output = {}
          try {
            output = parserFun.setUA(this.webchatData.navigator).getResult()
          } catch (error) {}

          if (output && output.os && output.os.name) {
            osContent = output.os.name
            if (output.os.version) {
              osContent = output.os.name + ' ' + output.os.version
            }
          }
        }
        if (!osContent || osContent === 'undefined') {
          if (this.webchatData.ubaInfo && this.webchatData.ubaInfo.osInfo) {
            osContent = this.webchatData.ubaInfo.osInfo
          } else {
            osContent = this.$t('webchat.nothing')
          }
        }
        return osContent
      },
      deviceInfo () {
        // 移动端机型
        var deviceCon = ''
        if (this.webchatData && this.webchatData.navigator) {
          var output = {}
          try {
            output = parserFun.setUA(this.webchatData.navigator).getResult()
          } catch (error) {}
          if (output && output.device && output.device.type === 'mobile') {
            deviceCon = ' ' + output.device.model
          }
        }
        return deviceCon
      },
      invitedUserName () {
        let webchatStatus = this.webchatData.status;
        let returnText = ''
        if (webchatStatus === 'finish') {
          let history = this.webchatData.history;
          if (history && history.length > 0) {
            let userList = []
            history.forEach((item)=>{
              if (item.type === 'invite' && item.deal === 'accept') {
                userList.push(item.invitedUser);
              }
            })
            if (userList && userList.length > 0) {
              userList.forEach((id) => {
                if (returnText) {
                  returnText=returnText + '，' + this.$store.getters.agents[id].displayName
                } else {
                  returnText= this.$store.getters.agents[id].displayName
                }
              })
            } else {
              returnText = this.$t('webchat.nothing');
            }
          } else {
            returnText = this.$t('webchat.nothing');
          }
        } else {
          returnText = this.webchatData.assistAgent ? this.webchatData.invitedUserName : this.$t('webchat.nothing')
        }
        return returnText
      },
      inviteUserStatus () {
        let webchatStatus = this.webchatData.status;
        let returnText = ''
        if (webchatStatus === 'finish') {
          let history = this.webchatData.history;
          if (history && history.length > 0) {
            let userList = []
            history.forEach((item)=>{
              if (item.type === 'invite' && item.deal === 'accept') {
                userList.push(item.invitedUser);
              }
            })
            if (userList && userList.length > 0) {
              returnText = this.$t('webchat.accecptInvite')
            } else {
              returnText = this.$t('webchat.noInvite')
            }
          } else {
            returnText = this.$t('webchat.noInvite');
          }
        } else {
          returnText = !this.webchatData.inviteUserStatus ? this.$t('webchat.noInvite') : this.webchatData.inviteUserStatus === 'accept' ? this.$t('webchat.accecptInvite') : this.$t('webchat.noAccecptInvite')
        }
        return returnText;
      },
      agentName1 () {
        let data = ''
        if (this.webchatData && this.webchatData.user && this.$store.getters.agents) {
          data = this.$store.getters.agents[this.webchatData.user].displayName
        }
        return data
      },
      satisfactioEvaluation () {
        return this.$store.state.session.user.funcIds && contains(this.$store.state.session.user.funcIds, 'func_satisfactio_evaluation')
      },
    },
    methods:{
      showChatMethod () {
        let platform = ''
        if (this.webchatData) {
          if (this.webchatData.platform === 'pc') {
            platform = this.$t('webchat.platformPc')
          } else if (this.webchatData.platform === 'wap') {
            platform = this.$t('webchat.platformWap')
          } else if (this.webchatData.platform === 'sdk') {
            platform = this.$t('webchat.platformApp')
          } else if (this.webchatData.platform === 'weixin') {
            platform = this.$t('webchat.platformWeixin')
          } else if (this.webchatData.platform === 'wxmini') {
            platform = this.$t('webchat.platformWeixinMini')
          } else if (this.webchatData.platform === 'weibo') {
            platform = this.$t('webchat.platformWeibo')
          } else if (this.webchatData.platform === 'wxwork') {
            platform = this.$t('webchat.enterpriseShot')
          } else if (this.webchatData.platform === 'ocpc') {
            platform = this.$t('webchat.baiduBCP')
          } else if (this.webchatData.platform === 'dy') {
            platform = this.$t('webchat.TikTok')
          } else if (this.webchatData.platform === 'wxkf') {
            platform = this.$t('webchat.platformWXKF')
          } else {
            platform = this.$t('webchat.platformOther')
          }
        }
        return platform
      },
      popoverShow(){
        this.relatePopoverShow = true
      },
      //保存关联会话
      saveRelatedSession(){
        if(this.isActive&&this.searchContent){
          this.$emit('saveRelatedSession',this.searchContent)
          this.searchContent = ''
          this.relatedSessionList = []
          this.relatePopoverShow = false
        }else{
          this.$message.error(this.$t('business.selectSession'))
        }
      },
      //会话列表点击更改class
      relationChange(){
        this.isActive = !this.isActive
      },
      //关联会话详情
      relationSessionDetail(number){
        let data = {_id: number}
        if(this.relatedSessionShow){
          this.$store.dispatch('queryChatInfoById', data).then((res) => {
            if (res && res.chatSession) {
              this.webchatData = res.chatSession
              let queryData = {
                sid: this.webchatData.sid,
                when: this.messageList[0] ? this.messageList[0].when : new Date().getTime(),
                submenu: 'webchat_all',
                currentSessionId: this.webchatData._id
              }
              if (!this.messageList[0]) {
                // 如果当前消息列表没有消息，传参让服务端从最新的开始找
                queryData.whenStartTag = new Date().getTime()
              }
              if (!this.webchatData.showHistoryBtn) {
                // 滚动加载当前会话
                queryData.limit = 10
                queryData.sessionId = this.webchatData._id
              } else {
                // 滚动加载历史会话
                queryData.limit = 50
              }
              this.$store.dispatch('queryMessageHistory', queryData).then((res) => {
                if(res){
                  this.messageList = res
                }
              })
            }else{
              this.webchatData = {}
            }
            //当会话详情为空时不打开弹窗
            if(this.webchatData&&Object.keys(this.webchatData).length >0){
              this.relatedSessionIsShow = true
            }
          })
        }
      },
      //关闭弹窗
      detailClose(){
        this.relatedBusinessIsShow = false
      },
      //删除关联会话
      closeRelatedSession(number){
        this.$emit('closeRelatedSession',number)
      },
      //搜索
      handleIconClick(){
        this.isActive = false
        if(!this.searchContent){
          this.relatedSessionList = []
        }else{
          let data = {_id:this.searchContent}
          this.$store.dispatch('queryChatInfoById', data).then((res) => {
            if (res && res.success) {
              if (res.chatSession) {
                this.relatedSessionList = [res.chatSession]
              }else{
                this.relatedSessionList = []
              }
            }
          })
        }
      },
      leaveTime (val) { // 访客离开时间
        if (val) {
          return timeFormat(getFormatDateTime(new Date(val)))
        } else {
          return ''
        }
      },
      chatTime (item) {
        if (item.chatTime) {
          return item.chatTime
        }
        let shortTime = timeFormat(item.createTime, 'card')
        item.chatTime = shortTime
        return shortTime
      },
      toPeer (data) {
        let peerId = data.toPeer || data.ToPeer
        let peer = getCacheByKey('mailQueues', 'Exten', peerId)
        let peerName = ''
        if (peer) {
          peerName = peer.DisplayName
        }
        return peerName
      },
      agentName (data) {
        let agent = getCache('agents', data.user)
        let agentDisplayName = ''
        if (agent && agent.displayName) {
          agentDisplayName = agent.displayName
        }
        return agentDisplayName
      },
      showGrabBtn (toPeer, user, status, inviteUserStatus) {
        // 全部中展示浏览信息
        let isContainPeer = false
        let showGrabIcon = false
        let accessChannelAgent = this.$getCache('custTmpls')
        let peer = accessChannelAgent.filter(obj => obj._id === toPeer)[0]
        if (peer && peer.agents && peer.agents.length) {
          let accessAgents = []
          accessAgents = peer.agents
          accessAgents.forEach((item) => {
            if (item.agentID === this.$store.state.session.user._id) {
              isContainPeer = true
            }
          })
        }
        if (!isContainPeer) {
          showGrabIcon = false
        } else if (this.$store.state.session.user._id === user) {
          showGrabIcon = false
        } else if (status !== 'deal') {
          showGrabIcon = false
        } else if (!contains(this.$store.state.session.user.funcIds, 'func_webchat_grab')) {
          showGrabIcon = false
        } else if (inviteUserStatus === 'accept') {
          showGrabIcon = false
        } else {
          showGrabIcon = true
        }
        return showGrabIcon
      },
      platformContent (item) {
        let content = ''
        let accessItem = null
        if (item.platform === 'pc') {
            content += this.$t('webchat.websiteConShot')
        } else if (item.platform === 'weixin') {
            content += this.$t('webchat.weChatConShot')
        } else if (item.platform === 'wxmini') {
            content += this.$t('webchat.weChatMiniShot')
            if (item.sourceName) {
            content += item.sourceName
            }
        } else if (item.platform === 'sdk') {
            content += this.$t('webchat.appConShot')
        } else if (item.platform === 'wap') {
            content += this.$t('webchat.wapConShot')
        } else if (item.platform === 'weibo') {
            content += this.$t('webchat.weBoConShot')
        } else if (item.platform === 'wxwork') {
            content += this.$t('webchat.enterpriseShot')
        } else if (item.platform === 'ocpc') {
            content += this.$t('webchat.baiduBCP')
        } else if (item.platform === 'dy') {
            content += this.$t('webchat.TikTok')
        } else if (item.platform === 'wxkf') {
            content += this.$t('webchat.platformWXKF')
        }
        if (this.multiChannel && this.multiChannel instanceof Array) {
            this.multiChannel.forEach((i) => {
            if (item.accessId === i.accessId) {
                accessItem = i
            }
            })
            if (accessItem && accessItem.name) {
            content += ' | ' + accessItem.name
            }
            return content
        } else {
            this.$store.dispatch('getCache', {type: 'webchatAndSdkConfig'}).then((res) => {
            if (res && res instanceof Array) {
                this.multiChannel = res
            } else {
                this.multiChannel = []
            }
            this.multiChannel.forEach((i) => {
                if (item.accessId === i.accessId) {
                accessItem = i
                }
            })
            if (accessItem && accessItem.name) {
                content += ' | ' + accessItem.name
            }
            return content
            })
        }
      },
      currentColor (status) {
        let statusConfig
        let custTmpls = this.$getCache('custTmpls')
        if (custTmpls[0]) {
          statusConfig = custTmpls[0].statusConfig
        }
        if (status) {
          if (statusConfig && statusConfig[status]) {
            return statusConfig[status].color
          } else {
            return this.colors[status] ? this.colors[status] : '#009FE3'
          }
        }
      },
      statusName (status) { //
        let custTmpls = this.$getCache('custTmpls')
        if (status && custTmpls[0]) {
          let cs = custTmpls[0].status[status]
          if (cs) {
            return cs
          } else {
            return status !== 'status_unknow' ? this.$t('public.unknownCustomer') : this.$t('public.unknownCustomer')
          }
        } else {
          return this.$t('public.unknownCustomer')
        }
      },
      decodeFun (data) {
        let val = data
        if (val) {
          try {
            val = decodeURIComponent(val)
          } catch (error) {
            try {
              val = $URL().decode(val)
            } catch (error) {
              val = ''
            }
          }
        }
        return val
      },
      investigateShow (flag) {
        if (flag) {
          this.investigate = true
        } else {
          this.investigate = false
        }
      },
    },
    beforeMount(){
        this.$store.dispatch('getCache', {type: 'webchatAndSdkConfig'}).then((res) => {
            if (res) {
            this.multiChannel = res
            }
        })
    },
    mounted(){
      this.CSRShowToAgent = getCache('CSRShowToAgent') || 'all'
    }
};
</script>

<style lang='stylus' scoped>
    @import '../../../../assets/common.styl'
    .follow-label
      line-height 24px
      font-size 12px
    .follow-agent
      .item
        width 88px
        line-height 24px
        text-overflow ellipsis
        overflow hidden
        white-space nowrap
    .follow-agent-wrap
      padding-left 72px
      .follow-common
        float left
        position relative
        line-height 24px
        margin 0 0 10px 10px
        padding 0 10px
        border-radius 4px
        font-size 12px
      .follow-agent-add
        border 1px solid $c-main
        color $c-main
        cursor pointer
      .follow-agent
        line-height 26px
        background-color $c-bus-label
        color #fff
        &:hover
          .el-icon-close
            display block
        .el-icon-close
          display none
          position absolute
          right -10px
          top -10px
          width 24px
          height 24px
          font-size 16px
          line-height 24px
          transform scale(0.6)
          text-align center
          color #fff
          background-color $c-pink
          border-radius 50%
          border 1px solid #fff
          cursor pointer
    .detail-table-wrap
      position fixed
      top 0
      left 0
      right 0
      bottom 0
      background rgba(0,0,0,.5)
      z-index 200
    .approval
      padding-top 20px
    .text 
      color #000
      cursor pointer
      font-size 12px
.relationWrap
  .active 
    position relative
    padding 8px
    border 2px solid #459AE9
  .relationLi
    position relative
    padding 8px
    .relationDuihao
      position:absolute
      height:16px
      width:16px
      top:-1px
      right:-1px
      background rgb(69, 154, 233)
     .card_chat_content
          height 21px
          line-height: 21px
          display: flex
          justify-content: space-between
        .agents_and_skill_group
          justify-content: space-between
          line-height: 20px;
          height: 21px;
          width 100%
      .new_chat.font14
        font-weight 500
        justify-content: space-between
      .new_chat
        position relative
        overflow: hidden
        line-height: 17px
        height: 17px
        display: flex
        .Cover
          position absolute
          display inline-block
          width 100%
          height 100%
          z-index 2
    .platformContent
        float left
        text-overflow: ellipsis
        overflow: hidden
        color: $cf-gray4
        white-space: nowrap
    .cust_status_box
        line-height 18px
        float: right
    .onlineStatus
        color #fff
        background #41b27f
        border-radius: 1px
        height: 12px
        font-size: 12px
        line-height: 12px
        float: left
        margin: 1px 5px 0 0
        padding: 1px
    .offlineStatus
        color #fff
        background $cf-level1
        border-radius: 1px
        height: 12px
        font-size: 12px
        line-height: 12px
        float: left
        margin: 1px 5px 0 0
        padding: 1px
    .im_pc:before
        content "\e713"
    .im_weixin:before
        content "\e715"
    .im_wxmini:before
        content "\e716"
    .im_wap:before
        content "\e714"
    .im_sdk:before
        content "\e671"
    .im_weibo:before
        content "\e6d1"
    .im_wxwork:before
        content "\e747"
    .im_ocpc:before
        content "\e761"
    .im_dy:before
        content "\e8db"
    .im_wxkf:before
        content "\e754"
    [class^='im_']
        font-family "iconfont" !important
        font-style normal
        -webkit-font-smoothing antialiased
        color $cf-color1 !important
    .custintent
        margin: 0 5px
        position: relative
        height: 16px
        line-height: 16px
        font-size: 14px
        font-weight: bold
        color: $c-main
.follow-common1
  float left
  position relative
  line-height 24px
  margin 0px 5px 5px 5px
  padding 0 10px
  border-radius 4px    
  background-color #91c1f1
  color #fff
  font-size 12px
  cursor pointer       
.follow-agent-add
  cursor pointer
.el-icon-close
  font-size 12px
.follow-agent
  &:hover
    .el-icon-close
      display block
  .el-icon-close
    display none
    position absolute
    right -10px
    top -10px
    width 24px
    height 24px
    font-size 12px
    line-height 24px
    transform scale(0.6)
    text-align center
    border-radius 50%
    background $c-pink
    color #fff
    cursor pointer
.detailWrap
  margin-top 15px
  max-height 800px
  overflow-y auto
  .webchat-head
    margin-bottom 10px
    .custintent
      background: #00ade6;
      padding: 1px 6px;
      border-radius: 5px;
      color: #fff;
      margin-left 10px
      height 24px
      line-height 24px
  [class^='im_']
    font-family "iconfont" !important
    font-style normal
    -webkit-font-smoothing antialiased
    color $cf-level4
    margin-right 4px
    margin-left 14px
  .msgWrap
    display flex
    .msgBox
      flex 1
      max-height 400px
      overflow-y auto
      border 1px solid #ccc
    .msgInfo 
      width 220px
      padding 0 10px
      max-height 400px
      overflow-y auto
      .title
        font-size 14px
        font-weight 600
        color $cf-gray3
      .information
        padding-top 8px
        padding-bottom: 20px
        .guijiHistory
          font-size 12px
          padding 20px
          .item
            color $c-log
          .desc
            color $cf-gray0
            margin-bottom 10px
        .guijiHighLight
          color $c-main
          cursor pointer
        .item
          position relative
          min-height 24px
          line-height 24px
          &.clearfix:after
            display block
          .label
            width 90px
            float left
            color $cf-gray3
          .value
            color $cf-gray0
            word-wrap break-word
            word-break normal
            a
              color $c-main
      .investigate_con
        position absolute
        bottom 0
        width 100%
        left 0
        background $cf-white
        box-shadow 0 0 8px #aaa
        padding 8px
        box-sizing border-box
        i
          font-style normal
        span
          /*float none*/
          clear both
          vertical-align bottom
        li
          margin-bottom 6px
        .investigate_content
          float none
          display inline
          word-break break-all
          white-space normal
          span
            color $cf-level2
      .investigate_box
        span
          color $c-main
      .icon-fuzhi
        color $c-main
        cursor pointer
        font-size 12px
        margin-left 10px
      .icon-tixingweizhi
        border 1px solid $c-main
        border-radius 50%
        color $c-main
        display inline-block
        height 16px
        width 16px
        text-align center
        line-height 16px
        font-size 12px
        cursor pointer
        transform scale(0.8)
</style>
